<template>
  <div class="HealthPage">
    <!--<div class="HomeTopBox"-->
         <!--:style="{background: 'url('+imgUrl+')',backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}"></div>-->
    <div class="HomeTopBox">
      <van-swipe :autoplay="3000">
        <van-swipe-item
            :style="{background: 'url('+item.img+')',backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}"
            v-for="(item, index) in swiperList"
            :key="index">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="mainBox">
      <div class="imgBox">
        <template v-for="(item, index) in imgList">
          <div class="itemBox" :key="index"
               @click="jumpPage(item)"
               :style="{background: 'url('+item.imgUrl+')',backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}">
            <div class="squireBox">
              <div class="englishName">{{ item.englishName }}</div>
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data () {
    return {
      imgUrl: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
      index: 0,
      timer: null,
      swiperList: [{
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg'
      }, {
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg'
      }, {
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg',
        fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
      }],
      imgList: [{
        pathUrl: '/Detail',
        imgUrl: require('../../assets/health/h1.png'),
        name: '道教养生',
        englishName: 'INTRODUCTION'
      }, {
        pathUrl: '/Detail',
        imgUrl: require('../../assets/health/h2.png'),
        name: '青城后山',
        englishName: 'AGRITAINMENT'
      }, {
        pathUrl: '/Detail',
        imgUrl: require('../../assets/health/h3.png'),
        name: '农家乐',
        englishName: 'AGRITAINMENT'
      }, {
        pathUrl: '/Detail',
        imgUrl: require('../../assets/health/h4.png'),
        name: '农家乐',
        englishName: 'AGRITAINMENT'
      }]
    }
  },
  methods: {
    jumpPage (obj) {
      this.$router.push({
        path: obj.pathUrl
      })
    },
    setTimeIntervalEvent (index) {
      index ? this.index = index : this.index = 0
      this.timer = setInterval(() => {
        this.imgUrl = this.swiperList[this.index].img
        if (this.index >= this.swiperList.length) {
          this.index--
        } else {
          this.index++
        }
        console.log(this.index)
      }, 2000)
    }
  },
  mounted () {
    // this.setTimeIntervalEvent()
  }
}
</script>

<style scoped lang="scss">
  .HealthPage{
    width: 100%;
    height: auto;
    min-height: calc(100vh);
    background: #fff;
    padding-bottom: 1px;
    .clear {
      clear: both;
    }
    .HomeTopBox{
      width: 750px;
      height: 378px;
      /*padding-top: 125px;*/
      /*background: url("../../assets/health/topBg.png") no-repeat;*/
      /*background-size: 100% 100%;*/
      .van-swipe {
        cursor: pointer;
        height: 378px;
        &-item {
          padding: 125px;
          &:nth-child(even) {
            background-color: #39a9ed;
          }
          &:nth-child(odd) {
            background-color: #66c6f2;
          }
        }
      }
    }
    .mainBox{
      width: 100%;
      margin: 50px auto;
      .imgBox {
        .itemBox {
          width: 710px;
          height: 235px;
          margin: 30px auto;
          border-radius: 5px;
          padding-top: 117px;
          .squireBox{
            width: 348px;
            height: 117px;
            margin: 0 auto;
            background: url("../../assets/health/bg.png") no-repeat;
            background-size: 100% 100%;
            color: #fff;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 3.3px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .name{
              font-family: SimHei;
              font-size: 25px;
            }
            .englishName{
              font-family: FuturaBT-BoldCondensed;
              font-size: 34px;
            }
          }
        }
      }
    }
  }
</style>
